<template>
  <div>
    <!-- 文字标题 -->
    <div class="container">
      <p>前方惊喜</p>
      <p> 你准备好了吗？</p>
    </div>
<!-- 跳转选项 -->
<div class="select">
    <!-- <router-link to="./timePage">[确定]</router-link> -->
    <!-- <router-link to="./timePage">[取消]</router-link> -->
    <div class="yes" @click="sure">[ 确定 ]</div>
    <div class="no" @click="open">[ 取消 ]</div>
    <!-- <el-button type="primary">主要按钮</el-button> -->
</div>
<!-- 箭头 固定定位 -->
<img class="jiantou" src="../assets/jiantou.png" alt="">
<!-- <heartBGD></heartBGD> -->
  </div>
</template>

<script>
// 导入背景
// import heartBGD from '../components/heartBGD.vue'
export default {
  // components: { heartBGD },
  methods: {
    // 点击确定
    sure: function () {
      // console.log('1')
      this.$prompt('橘黄色的日落吞没在海平线', '来对个暗号😁', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
        // inputPattern: '夜色慢慢摊开露出星光点点',
        // inputErrorMessage: '再想想~'
      }).then(({ value }) => {
        if (value === '夜色慢慢摊开露出星光点点') {
          this.$message({
            type: 'success',
            message: '对啦！贴贴~ '
          })
          this.$router.push('./timePage')
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '再想想~'
        })
      })
    },
    // 点击取消
    open () {
      this.$confirm('取消无效嘻嘻', '🤪', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '再给你亿次机会！'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '快块点击确定！'
        })
      })
    }
  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
    text-align: center;
    /* background-color: pink; */
    font-size: 135px;
    font-family: 幼园;
    margin-top: 65px;
    margin-bottom: 75px;
}
.select{
  /* background-color: yellow; */
  display: flex;
  font-size: 54px;
  font-family: 幼园;
justify-content: space-around;
padding: 0px 200px;
}
.yes{
  cursor: pointer;
}
.no{
  cursor: pointer;
}
.jiantou{
  width: 40px;
    position: fixed;
    bottom: 115px;
    left: 570px;
  /* font-size: 10px; */
}
</style>
